<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    3
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五彩导航条</title>
    <style>
        /* 
        宏观分析, 课程重点, 四五个月内需要讲的内容 以学生的学习结果为导向目标. 保证学员的最低要求.
        一个老师的最低要求是.
        每天的目标, 学生学会什么中.
         */
        .nav a {
            /* 转换模式, 将a标签(行内元素)转换成行内块元素 */
            display: inline-block;
            /* 根据图片的大小设置a标签的宽度和高度 */
            width: 120px;
            height: 58px;
            background-color: pink;
            /* 水平居中, 让字体在水平方向居中 */
            text-align: center;
            /* 让字体在垂直方向上居中  line-height属性等于行高垂直居中, 大于行高就会往下部靠, 小于行高就会往上移动*/
            line-height: 48px;
            /* 清除a标签的修饰 */
            text-decoration: none;
            /* 修改字体颜色 */
            color: white;
        }
        
        .nav .bg1 {
            /* 插入图片后发现文字并没有在图片的中间 */
            background-image: url(./imgs/bg1.png);
        }
        
        .nav .bg1:hover {
            background-image: url(./imgs/bg5.png);
        }

        .nav .bg2 {
            /* 插入图片后发现文字并没有在图片的中间 */
            background-image: url(./imgs/bg2.png);
        }
        .nav .bg2:hover {
            background-image: url(./imgs/bg4.png);
        }
    </style>
</head>
<body>
    <!-- 
        学习目标: 
        1.学会元素的模式转换
        2.学会字体定位
        3.学会使用设置背景图片的相关属性
        4.学会使用复合选择器, 伪类选择器
     -->

     <!-- 
        1.需要将a标签(行内元素)改为行内块元素
        2.定位字体的位置, 水平垂直居中显示
        3.设置背景图片, 使用背景图的相关属性
        4.使用选择器, 选中我们需要的标签
      -->
    <!-- shift + alt -->
    <div class="nav">
        <a href="#" class="bg1">五彩导航条</a>
        <a href="#" class="bg2">五彩导航条</a>
        <a href="#">五彩导航条</a>
        <a href="#">五彩导航条</a>
        <a href="#">五彩导航条</a>    
    </div>
</body>
</html>
